<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>项目管理</el-breadcrumb-item>
        <el-breadcrumb-item>项目计划</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card>
        <el-row :gutter="20">
          <!--搜索框-->
          <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange" clearable
                       @clear="getPlans">
          </el-cascader>
        </el-row>
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="周计划" name="first">
            <el-table border :data="weekPlanInfo" style="width: 100%">
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column label="计划标题" prop="planName"></el-table-column>
              <el-table-column label="组名" prop="group"></el-table-column>
              <el-table-column label="负责人" prop="userName"></el-table-column>
              <el-table-column label="计划状态">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.planStatus == '进行中'" size="mini" type="warning" plain
                             class="buttonStatus">
                    进行中
                  </el-button>
                  <el-button v-if="scope.row.planStatus == '未完成'" size="mini" type="danger" plain>
                    未完成
                  </el-button>
                  <el-button v-if="scope.row.planStatus == '已完成'" size="mini" type="success" plain>
                    已完成
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="开始时间" sortable>
                <template slot-scope="scope">
                  <span style="margin-left: 10px;color:#67C23A"><i class="el-icon-time"></i>{{scope.row.startTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="截止时间" sortable>
                <template slot-scope="scope">
                  <span style="margin-left: 10px;color: red"><i class="el-icon-time"></i>{{scope.row.endTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="270">
                <template slot-scope="scope">
                  <el-button type="success" size="mini" @click="handleShow(scope.row.planStatus,scope.row.planDesc,scope.row.planSummary)">
                    查看计划
                  </el-button>
                  <el-button type="info" size="mini" @click="getLogs(scope.row.planId)">
                    日志记录
                  </el-button>
                </template>

              </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
              @size-change="weekHandleSizeChange"
              @current-change="weekHandleCurrentChange"
              :current-page="weekPage.pageNum"
              :page-sizes="[6,7, 8, 9, 10]"
              :page-size="weekPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="weekPage.total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="月计划" name="second">
            <el-table border style="width: 100%" :data="monthPlanInfo">
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column label="计划标题" prop="planName"></el-table-column>
              <el-table-column label="负责人" prop="userName"></el-table-column>
              <el-table-column label="计划状态">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.planStatus == '进行中'" size="mini" type="warning" plain>
                    进行中
                  </el-button>
                  <el-button v-if="scope.row.planStatus == '未完成'" size="mini" type="danger" plain>
                    未完成
                  </el-button>
                  <el-button v-if="scope.row.planStatus == '已完成'" size="mini" type="success" plain>
                    已完成
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="开始时间" sortable>
                <template slot-scope="scope">
                  <span style="margin-left: 10px;color:#67C23A"><i class="el-icon-time"></i>{{scope.row.startTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="截止时间" sortable>
                <template slot-scope="scope">
                  <span style="margin-left: 10px;color: red"><i class="el-icon-time"></i>{{scope.row.endTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="270">
                <template slot-scope="scope">
                  <el-button type="success" size="mini" @click="handleShow(scope.row.planStatus,scope.row.planDesc,scope.row.planSummary)">
                    查看计划
                  </el-button>
                  <el-button type="info" size="mini" @click="getLogs(scope.row.planId)">
                    日志记录
                  </el-button>
                </template>

              </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
              @size-change="monthHandleSizeChange"
              @current-change="monthHandleCurrentChange"
              :current-page="monthPage.pageNum"
              :page-sizes="[8,9, 10, 11, 12]"
              :page-size="monthPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="monthPage.total">
            </el-pagination>
          </el-tab-pane>
        </el-tabs >

        <!--计划详情-->
        <el-drawer :visible.sync="drawer" :direction="direction">
          <p style="text-align:center;font-size:20px;font-weight:bold" >计划内容</p><br>
          <el-input type="textarea" class="sideBarPlanDesc" :show-word-limit="true"
                    v-model="sideBarPlanDesc" autosize>
          </el-input>
          <p style="text-align:center;font-size:20px;font-weight:bold" >计划总结</p><br>
          <el-input type="textarea" class="sideBarPlanDesc" :show-word-limit="true"
                    autosize :value="sideBarPlanSummary ? sideBarPlanSummary :'暂未填写该计划的总结'">
          </el-input>
        </el-drawer>

        <el-dialog title="操作日志" :visible.sync="dialogTableVisible">
          <el-table :data="planLogs" border>
            <el-table-column property="editPlanUser" label="操作人"></el-table-column>
            <el-table-column property="groupName" label="所属组"></el-table-column>
            <el-table-column property="planType" label="当前计划类型"></el-table-column>
            <el-table-column property="log" label="操作内容"></el-table-column>
            <el-table-column property="editTime" label="操作时间" width="180px"></el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination
            @size-change="logHandleSizeChange"
            @current-change="logHandleCurrentChange"
            :current-page="log.pageNum"
            :page-sizes="[5,6,7,8,9]"
            :page-size="log.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="log.total">
          </el-pagination>
        </el-dialog>

      </el-card>


    </div>
</template>

<script>
    export default {
      name: "AdminPlan",
      data() {
        return {
          drawer: false,
          dialogTableVisible: false,
          direction: 'rtl',
          activeName: 'first',//选项卡
          weekPlanInfo: [], //周计划
          monthPlanInfo: [], //月计划
          value: [],
          options: [],
          planLogs: [],
          sideBarPlanDesc: '',
          sideBarPlanSummary: '暂未填写该计划总结',
          showSummary: false,
          groupName: '',
          planStatus: '',
          //周计划页码
          weekPage: {
            //当前的页数
            pageNum: 1,
            //每页显示多少条数据
            pageSize: 6,
            //总条数
            total: 1
          },
          //月计划页码
          monthPage: {
            //当前的页数
            pageNum: 1,
            //每页显示多少条数据
            pageSize: 6,
            //总条数
            total: 1
          },
          //日志
          log: {
            pageNum: 1,
            pageSize: 5,
            total: 1
          }
        }
      },
      created() {
        this.getPlans();
        this.getTree();
      },
      methods: {
        //获取计划列表
        async getPlans(){
          const {data: res} = await this.$http.get("plan/getPlans",{
            params: {
              weekPlanPageNum: this.weekPage.pageNum,
              weekPlanPageSize: this.weekPage.pageSize,
              monthPlanPageNum: this.monthPage.pageNum,
              monthPlanPageSize: this.monthPage.pageSize,
              groupName: this.groupName,
              planStatus: this.planStatus
            }
          });
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          console.log(res)
          this.weekPlanInfo = res.data.weekPlanList;
          this.weekPage.total = res.data.weekTotal;
          this.monthPlanInfo = res.data.monthPlanList;
          this.monthPage.total = res.data.monthTotal;
        },
        //获取日志列表
        async getLogs(planId){
          const {data: res} = await this.$http.get(`log/getLogs/${this.log.pageNum}/${this.log.pageSize}/${planId}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.planLogs = res.data.planLogs;
          this.log.total = res.data.total;
          this.dialogTableVisible = true;
        },
        //从后台获取搜索内容
        async getTree(){
          const {data: res} = await this.$http.get("plan/getStaticTree");
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          console.log(res);
          this.options = res.data;
        },
        //周计划面板页码
        weekHandleSizeChange(newPageSize){
          this.weekPage.pageSize = newPageSize;
          this.getPlans();
        },
        weekHandleCurrentChange(newPageNum){
          this.weekPage.pageNum = newPageNum;
          this.getPlans();
        },
        //月计划面板页码
        monthHandleSizeChange(newPageSize){
          this.monthPage.pageSize = newPageSize;
          this.getPlans();
        },
        monthHandleCurrentChange(newPageNum){
          this.monthPage.pageNum = newPageNum;
          this.getPlans();
        },
        //日志面板页码
        logHandleSizeChange(newPageNum){
          this.log.pageNum = newPageNum;
        },
        logHandleCurrentChange(newPageSize){
          this.log.pageSize = newPageSize;
        },
        //查看计划详情
        handleShow(planStatus,planDesc,planSummary){
          this.sideBarPlanDesc = planDesc;
          this.sideBarPlanSummary = planSummary;
          this.drawer = true
          if(planStatus == '已完成'||planStatus == '未完成'){
            this.showSummary = true
          }
        },
        handleChange(value) {
          console.log(value);
          this.groupName = value[0];
          this.planStatus = value[1];
          this.weekPage.pageNum = 1;
          this.weekPage.pageSize = 6;
          this.monthPage.pageNum = 1;
          this.monthPage.pageSize = 6;
          this.getPlans();
        }
      }
    }
</script>

<style scoped>
  .el-tabs{
    margin-top: 15px;
    font-size: 13px;
  }

</style>
